Google Charts এর মাধ্যমে আপনি সহজেই চার্ট তৈরি করতে পারেন, তবে এগুলোর স্টাইল এবং কাস্টমাইজেশন আপনার প্রয়োজন অনুসারে পরিবর্তন করা সম্ভব। Google Charts এর সাথে একাধিক কাস্টমাইজেশন অপশন রয়েছে, যেমন রং, ফন্ট, অক্ষের লেবেল, টুলটিপ, লেজেন্ড ইত্যাদি। এই টিউটোরিয়ালে আমরা দেখব কিভাবে Google Charts এর Basic Customization এবং Style পরিবর্তন করা যায়।
Google Charts এর Basic Customization
Google Charts এর মাধ্যমে তৈরি চার্টগুলোর অনেকগুলো উপাদান কাস্টমাইজ করা যায়। কিছু প্রধান কাস্টমাইজেশন পয়েন্ট নিম্নরূপ:
- চার্টের শিরোনাম (Title)
- অক্ষের লেবেল (Axis Labels)
- রং (Colors)
- লেজেন্ড (Legend)
- টুলটিপ (Tooltip)
১. চার্টের শিরোনাম কাস্টমাইজেশন (Chart Title Customization)
চার্টের শিরোনাম সেট করতে বা কাস্টমাইজ করতে, আপনি title অপশন ব্যবহার করতে পারেন। এতে আপনি শিরোনামের স্টাইলও পরিবর্তন করতে পারবেন।
var options = {
title: 'Sales Growth Over Years',
titleTextStyle: {
color: 'blue', // শিরোনামের রং
fontSize: 20, // ফন্ট সাইজ
bold: true // বোল্ড স্টাইল
}
};
এখানে titleTextStyle এর মাধ্যমে শিরোনামের ফন্ট এবং রং কাস্টমাইজ করা হয়েছে।
২. অক্ষের লেবেল কাস্টমাইজেশন (Axis Labels Customization)
অক্ষের লেবেল কাস্টমাইজ করতে hAxis (horizontal axis) এবং vAxis (vertical axis) অপশন ব্যবহার করা হয়। এগুলোর মাধ্যমে আপনি অক্ষের নাম, রং, এবং ফন্ট সাইজ পরিবর্তন করতে পারবেন।
var options = {
title: 'Sales Growth Over Years',
hAxis: {
title: 'Year', // এক্স অক্ষের লেবেল
titleTextStyle: {color: 'green', fontSize: 14}, // এক্স অক্ষের লেবেলের রং ও ফন্ট সাইজ
textStyle: {color: 'red', fontSize: 12} // এক্স অক্ষের টেক্সটের রং ও ফন্ট সাইজ
},
vAxis: {
title: 'Sales (in USD)', // ওয়াই অক্ষের লেবেল
titleTextStyle: {color: 'purple', fontSize: 14}, // ওয়াই অক্ষের লেবেলের রং ও ফন্ট সাইজ
textStyle: {color: 'orange', fontSize: 12} // ওয়াই অক্ষের টেক্সটের রং ও ফন্ট সাইজ
}
};
এখানে এক্স এবং ওয়াই অক্ষের টেক্সটের রং এবং ফন্ট সাইজ পরিবর্তন করা হয়েছে।
৩. রং পরিবর্তন (Changing Colors)
চার্টের বিভিন্ন উপাদান যেমন বার, লাইন, পাই সেকশন ইত্যাদির রং পরিবর্তন করা যায়। colors অপশন ব্যবহার করে আপনি একাধিক রং নির্ধারণ করতে পারেন।
var options = {
title: 'Sales Growth Over Years',
colors: ['#FF5733', '#33FF57', '#3357FF'] // বার বা লাইন চার্টের রং পরিবর্তন
};
এখানে colors অ্যারে ব্যবহার করে তিনটি রং উল্লেখ করা হয়েছে।
৪. লেজেন্ড কাস্টমাইজেশন (Legend Customization)
চার্টে লেজেন্ড দেখানোর জন্য এবং এর স্টাইল কাস্টমাইজ করার জন্য legend অপশন ব্যবহার করা হয়।
var options = {
title: 'Sales Growth Over Years',
legend: {
position: 'top', // লেজেন্ডের অবস্থান (top, bottom, left, right)
textStyle: {color: 'blue', fontSize: 16} // লেজেন্ডের টেক্সটের রং ও ফন্ট সাইজ
}
};
এখানে লেজেন্ডের অবস্থান এবং টেক্সটের স্টাইল কাস্টমাইজ করা হয়েছে।
৫. টুলটিপ কাস্টমাইজেশন (Tooltip Customization)
টুলটিপ হল সেই ছোট বাক্যাংশ যা চার্টের যেকোনো উপাদানের ওপর হোভার করলে প্রদর্শিত হয়। আপনি টুলটিপের ফরম্যাট এবং কনটেন্ট কাস্টমাইজ করতে পারেন।
var options = {
title: 'Sales Growth Over Years',
tooltip: {
isHtml: true, // টুলটিপের কন্টেন্ট HTML হিসেবে দেখাবে
trigger: 'focus' // টুলটিপ কিভাবে ট্রিগার হবে (focus, hover)
}
};
এখানে টুলটিপের কন্টেন্ট HTML হিসেবে দেখানোর জন্য isHtml সেট করা হয়েছে।
Google Charts উদাহরণ
এখন আমরা একটি সিম্পল লাইন চার্ট তৈরি করব এবং এর মধ্যে কাস্টমাইজেশন দেখাবো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customized Google Chart</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2020', 1000],
['2021', 1200],
['2022', 1500],
['2023', 1800]
]);
var options = {
title: 'Company Sales Over the Years',
titleTextStyle: {
color: 'green', fontSize: 20, bold: true
},
hAxis: {
title: 'Year',
titleTextStyle: {color: 'blue', fontSize: 14},
textStyle: {color: 'orange', fontSize: 12}
},
vAxis: {
title: 'Sales (in USD)',
titleTextStyle: {color: 'purple', fontSize: 14},
textStyle: {color: 'red', fontSize: 12}
},
colors: ['#FF5733', '#33FF57'],
legend: {
position: 'top',
textStyle: {color: 'blue', fontSize: 16}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Customized Google Chart</h2>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে লাইন চার্টের শিরোনাম, অক্ষের লেবেল, রং, এবং লেজেন্ড কাস্টমাইজ করা হয়েছে।
উপসংহার
Google Charts এর মাধ্যমে আপনি সহজেই চার্ট তৈরি করতে পারেন এবং এগুলোর স্টাইল এবং কাস্টমাইজেশন করতে পারেন। এর মধ্যে শিরোনাম, অক্ষের লেবেল, রং, লেজেন্ড, টুলটিপ ইত্যাদির পরিবর্তন করার অপশন রয়েছে যা আপনাকে আপনার প্রয়োজন অনুযায়ী চার্টকে আরও আকর্ষণীয় এবং তথ্যবহুল করতে সাহায্য করে।
Read more
